<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宜家E护 - 家电商城</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">宜 家 E 护</div>
        <nav>
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">订单</a></li>
                <li><a href="#">我的</a></li>
                <li><a href="#">退出</a></li>
                <li><a href="#">客服</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <div class="sidebar">
            <h3>CATEGORY</h3>
            <ul>
                <li><a href="#">家政服务</a></li>
                <li><a href="#">家电清洗</a></li>
                <!-- 其他分类可以根据需要添加 -->
            </ul>
        </div>

        <div class="main-content">
            <div class="search-section">
                <h3>SEARCH</h3>
                <div class="search-form">
                    <input type="text" placeholder="商品名称">
                    <!-- <input type="text" placeholder="消费人姓名/联系方式"> -->
                    <button class="search-btn">查找</button>
                </div>
            </div>

            <h2>ALL</h2>
            
            <div class="products-grid">
                <!-- 产品1 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/fridge.png" alt="冰箱清洗">
                    </div>
                    <div class="product-info">
                        <h4>冰箱清洗</h4>
                        <p class="price">$199</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品2 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/pot.png" alt="厨房保洁">
                    </div>
                    <div class="product-info">
                        <h4>厨房保洁</h4>
                        <p class="price">$499</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品3 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/kitchen.png" alt="大扫除">
                    </div>
                    <div class="product-info">
                        <h4>大扫除</h4>
                        <p class="price">$699</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品4 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/tv.png" alt="家电套餐">
                    </div>
                    <div class="product-info">
                        <h4>家电套餐</h4>
                        <p class="price">$399</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品5 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/window.png" alt="擦玻璃">
                    </div>
                    <div class="product-info">
                        <h4>擦玻璃</h4>
                        <p class="price">$299</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品6 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/cleaning.png" alt="开荒保洁">
                    </div>
                    <div class="product-info">
                        <h4>开荒保洁</h4>
                        <p class="price">$699</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品7 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/water-heater.png" alt="热水器清洗">
                    </div>
                    <div class="product-info">
                        <h4>热水器清洗</h4>
                        <p class="price">$199</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品8 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/washing-machine.png" alt="洗衣机清洗">
                    </div>
                    <div class="product-info">
                        <h4>洗衣机清洗</h4>
                        <p class="price">$499</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>

                <!-- 产品9 -->
                <div class="product-card">
                    <div class="product-image">
                        <img src="images/air-conditioner.png" alt="空调清洗">
                    </div>
                    <div class="product-info">
                        <h4>空调清洗</h4>
                        <p class="price">$199</p>
                        <button class="add-to-cart">查看详情</button>
                        <button class="buy-now">预约</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer-content">
            <p>©Copyright <b>END</b></p>
            <div>
                <div class="contact-info">
                    联系电话：Zhengzhou, HeNan,  热线：(123)456-7890
                </div>
                <div class="payment-methods">
                    <p>联系方式：<a href="#">info@tqq.com</a></p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>
